/*--
    Author: W3layouts
    Author URL: http://w3layouts.com
    License: Creative Commons Attribution 3.0 Unported
    License URL: http://creativecommons.org/licenses/by/3.0/
--*/

/*-- Reset Code --*/

	html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
	article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
	ol,ul{list-style:none;padding:0;margin:0;}
	blockquote,q{quotes:none;}
	blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
	table{border-collapse:collapse;border-spacing:0;}
	a{text-decoration:none;}
	.txt-rt{text-align:right;}
	.txt-lt{text-align:left;}
	.txt-center{text-align:center;}
	.float-rt{float:right;}
	.float-lt{float:left;}
	.clear{clear:both;}
	.pos-relative{position:relative;}
	.pos-absolute{position:absolute;}
	.vertical-base{vertical-align:baseline;}
	.vertical-top{vertical-align:top;}
	.underline{	padding-bottom:5px;	border-bottom:1px solid #eee;margin:0 0 20px 0;}
	nav.vertical ul li{display:block;}
	nav.horizontal ul li{display: inline-block;}
	img{max-width:100%;}

/*-- Reset Code --*/
body {
    background:url("../images/bg.jpg");	
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center;
	background-size:cover;
}
h1 {
	font-size: 52px;
	font-weight: 800;
    text-align: center;
	letter-spacing: 3px;
	padding: 37px 0px;
	color: #FFFFFF;
	text-shadow: 2px 2px 2px rgba(16, 16, 16, 0.57);
	font-family: 'Montserrat', sans-serif;
}
form {
    padding-bottom: 28px;
}
h2 {
    text-align: center;
	color:#E0D7D7;
	font-size: 23px;
    letter-spacing: 2px;
	padding: 10px 0px;
	font-weight: 600;
}
.name,.email,.pass1,.pass2 {
    padding: 7px 10px;
	border: 0px solid rgba(22, 14, 12, 0.21);
    margin: 19px 0px;
	background-color:rgb(255, 255, 255);
    border-radius: 7px;
}
.name:hover,.email:hover,.pass1:hover,.pass2:hover {
    background: aliceblue;
}
.form-content {
	padding: 37px;
    width: 30%;
    margin:10px auto;
	font-family: 'Montserrat', sans-serif;
	border: 0px solid #EEE7E7;
	background-color:rgba(7, 7, 7, 0.6313725490196078);
}
label {
    width: 35%;
    font-size: 15px;
    display: inline-block;
    letter-spacing: 2px;
    color: #fff7f7;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.8313725490196079);
    padding: 10px 0px;
    text-align: center;
	margin-right:7px;
}
input.input1 {
    border: none;
    outline: none;
	width: 62%;
	padding: 10px 0px;
	background: none;
	color:#463c3c;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 1px;
	font-weight: 600;
}
input.input1:focus {
    border-bottom: 1px solid #FFFFFF;
}
input[type="submit"] {
    width: 100%;
    padding: 19px 0px;
	background-color:#d30505;
	border: none;
    outline: none;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
    letter-spacing: 1px;
    font-size: 17px;
	transition: 0.7s;
	color: #ffffff;
	cursor: pointer;
}
input[type="submit"]:hover {
	background-color:#3E3737;
	color:#ffffff;
}
footer {
    text-align: center;
	color:#FFFFFF;
	font-size:16px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
    letter-spacing: 2px;
	padding: 47px 0px;
}
footer a {
	color:#93ff6c;
	transition:0.7s;
}
footer a:hover {
	color:#9DA9A7;
	text-decoration:underline;
}

@media screen and (max-width: 1440px){
	.form-content {
    width: 33%;
}
}

@media screen and (max-width: 1366px){
	h1 {
    font-size: 50px;
}
	.form-content {
    width: 34%;
}
}

@media screen and (max-width: 1280px){
	.form-content {
    width: 36%;
}
}

@media screen and (max-width: 1080px){
	h1 {
    font-size: 47px;
}
	.form-content {
    width: 40%;
}
}

@media screen and (max-width: 1050px){
	.form-content {
    width: 41%;
}
}

@media screen and (max-width: 1024px){
	h1 {
    font-size: 45px;
}
}

@media screen and (max-width: 991px){
	.form-content {
    width: 47%;
}
}

@media screen and (max-width: 900px){
	h1 {
    font-size: 43px;
}
	.form-content {
    width: 51%;
}
}

@media screen and (max-width: 800px){
	.form-content {
    width: 53%;
}
}

@media screen and (max-width: 768px){
	.form-content {
    width: 57%;
}
	footer {
	padding: 47px 31px;	
}
}

@media screen and (max-width: 736px){
	.form-content {
    width: 63%;
}
}

@media screen and (max-width: 667px){
	h1 {
    font-size: 40px;
}
	footer {
	line-height: 24px;
}
}

@media screen and (max-width: 640px){
	.form-content {
    width: 67%;
}
}

@media screen and (max-width: 600px){
	h1 {
    font-size: 39px;
}
	.form-content {
    width: 73%;
}
.name, .email, .pass1, .pass2 {
    padding: 5px 10px;
}
}

@media screen and (max-width: 568px){
	h1 {
    padding: 28px 0px;
}
	footer {
	padding: 28px 0px;	
}
}

@media screen and (max-width: 480px){
	h1 {
    font-size: 33px;
}
	.form-content {
    width: 81%;
}
input.input1 {
    width: 61%;
}
}

@media screen and (max-width: 414px){
	h1 {
    font-size: 31px;
	letter-spacing: 1px;
}
	.form-content {
    padding: 28px;
}
label {
    font-size: 13px;
    letter-spacing: 1px;
}
footer {
    font-size: 14px;
    letter-spacing: 1px;
}
}

@media screen and (max-width: 384px){
	h1 {
    font-size: 28px;
}
	label {
    font-size: 12px;
}
	input.input1 {
    width: 60%;
}
	input[type="submit"] {
    padding: 17px 0px;
}
	footer {
    padding: 19px 0px;
    font-size: 13px;
}
}

@media screen and (max-width: 375px){
	.form-content {
    padding: 22px;
}
	input[type="submit"] {
    padding: 15px 0px;
}
}

@media screen and (max-width: 320px){
	h1 {
    font-size: 23px;
}
.form-content {
    padding: 20px;
}
.name, .email, .pass1, .pass2 {
    padding: 5px 4px;
}
label {
    letter-spacing: 0px;
}
}